import {ProColumns} from "@ant-design/pro-table";
import {SysMenuData} from "@/pages/system/menu/type";
import  {ReactNode} from "react";
import {UseFetchDataAction} from "@ant-design/pro-table/es/typing";
import {Button, message, Space, Tag} from "antd";
import {SysDictValueData} from "@/pages/system/dict/value/type";
import {sysMenuRemove} from "@/services/system/menu/api";
import AuthWrapper from "@/components/AuthWrapper";



export const columns: ProColumns<SysMenuData>[] = [
  {
    dataIndex: "index",
    valueType: "index",
  },
  {
    title: "按钮名称",
    dataIndex: "menuName",
    align: "center"
  },
  {
    title: "按钮权限",
    dataIndex: "authorize",
    hideInSearch: true,
    align: "center"
  },
  {
    title: "颜色",
    dataIndex: "color",
    align: 'center',
    hideInSearch: true,
    // @ts-ignore
    render: (text: ReactNode, record: SysDictValueData, index: number, action: UseFetchDataAction<SysDictValueData>) => {
      // @ts-ignore
      return <Tag color={record.color} style={{height: 20, width: 30}} bordered={false}></Tag>
    }
  },
  {
    title: "操作",
    valueType: 'option',
    align: "center",
    key: "option",
    width: "200px",
    // @ts-ignore
    render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysMenuData>) => {


      return (
        <Space>
          <AuthWrapper authorize={"sys:menu:remove"}>
            {(authorized: boolean) => <Button disabled={authorized} type="link" onClick={() => {
              // @ts-ignore
              sysMenuRemove([record.id]).then(res => {
                message.success("删除成功").then(res => {

                })
                action.reload()
              });
            }} danger>删除</Button>}
          </AuthWrapper>

        </Space>
      )
    }
  }
]
